<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasBordered;
use LowCode\Traits\Props\HasClosable;
use LowCode\Traits\Props\HasContentClass;
use LowCode\Traits\Props\HasContentStyle;
use LowCode\Traits\Props\HasDisabled;
use LowCode\Traits\Props\HasFooterClass;
use LowCode\Traits\Props\HasFooterStyle;
use LowCode\Traits\Props\HasHeaderClass;
use LowCode\Traits\Props\HasHeaderStyle;
use LowCode\Traits\Props\HasHugeSize;
use LowCode\Traits\Props\HasTag;
use LowCode\Traits\Props\HasTitle;
use LowCode\Traits\Slots\HasSlotAction;
use LowCode\Traits\Slots\HasSlotFooter;
use LowCode\Traits\Slots\HasSlotHeader;
use LowCode\Traits\Slots\HasSlotHeaderExtra;
use LowCode\UI\Node;


/**
 * Card 卡片组件
 * @method static Card make(string|JsExp|Node $title = null,mixed $children = null) Card组件
 */
class Card extends Naive
{

    use HasClosable, HasDisabled, HasBordered, HasTitle, HasHugeSize, HasTag;

    use HasHeaderClass, HasHeaderStyle, HasFooterClass, HasFooterStyle, HasContentClass,HasContentStyle;

    use HasSlotHeader, HasSlotFooter, HasSlotAction, HasSlotHeaderExtra;

    /**
     * @param string|JsExp|Node|null $title
     * @param mixed|null $children
     */
    public function __construct(string|JsExp|Node $title = null, mixed $children = null)
    {
        parent::__construct();
        if ($title instanceof Node){
            $this->slotHeader($title);
        }else{
            if ($title){
                $this->title($title);
            }
        }
        $this->children($children);
    }

    /**
     * 头部额外内容的类名
     * @param string|JsExp $value
     * @return $this
     */
    public function headerExtraClass(string|JsExp $value): static
    {
        return $this->prop("headerExtraClass",$value);
    }

    /**
     * 卡片头部额外内容的样式
     * @param array|string $headerExtraStyle
     * @return $this
     */
    public function headerExtraStyle(array|string $headerExtraStyle): static
    {
        return $this->prop("headerExtraStyle",$headerExtraStyle);
    }


    /**
     * 卡片是否可悬浮
     * @param string|bool $bool
     * @return $this
     */
    public function hoverable(string|bool $bool = true): static
    {
        return $this->prop("hoverable",$bool);
    }

    /**
     * 使用更深的背景色展现嵌入效果，只对亮色主题生效
     * @param string|bool $bool
     * @return $this
     */
    public function embedded(string|bool $bool = true): static
    {
        return $this->prop("embedded",$bool);
    }

    /**
     * 卡片的分段区域设置
     * @param bool|string|array $value boolean | { [part in 'content' | 'footer' | 'action']?: boolean | 'soft' }
     * @return $this
     */
    public function segmented(bool|string|array $value): static
    {
        return $this->prop('segmented', $value);
    }

    /**
     * 操作区域内容，需要是 render 函数
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function action(string $value, string $id = null): static
    {
        return $this->jsFunction("action",$value, $id);
    }

    /**
     * 卡片内容，可以是 render 函数
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function content(string $value, string $id = null): static
    {
        return $this->jsFunction("content",$value, $id);
    }

    /**
     * 底部内容
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function footer(string $value, string $id = null): static
    {
        return $this->jsFunction("footer",$value, $id);
    }


    /**
     * 头部额外内容，需要是 render 函数
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function headerExtra(string $value, string $id = null): static
    {
        return $this->jsFunction("header-extra",$value, $id);
    }

    /**
     * 覆盖内容，需要是 render 函数
     * @param string $value () => VNodeChild
     * @return $this
     */
    public function cover(string $value, string $id = null): static
    {
        return $this->jsFunction("cover",$value, $id);
    }



    /**
     * 设置 slot cover 内容
     * @param Node $node
     * @return $this
     */
    public function slotCover(Node $node): static
    {
        return $this->addSlot($node,'cover');
    }

//    /**
//     * 显示源码
//     * @param string $code
//     * @param int $type 0=卡片页脚显示,1=弹窗显示,2=抽屉显示
//     * @param string $lang
//     * @return $this
//     */
//    public function showCode(string $code, int $type = 0, string $lang = "php"): static
//    {
//        $btnCode = Button::make();
//        $btnCode->slotIcon(Icon::make("bi:code"));
//        $btnCode->tiny()->bordered(false);
//        $variable = "showModal_".Random::alpha(8);
//        $codeKey = "code_".Random::alpha(8);
//        $this->setState($codeKey, $code);
//        $this->setState($variable, false);
//        $appCode = AppCode::make("页面源码", $code);
////        $appCode->vBind("code", Js::state($codeKey));
////        $appCode->language($lang);
//        $btnCode->onClick(jsToggleEvent($variable), $variable);
//
//        if ($type==1){
//            $modal = Modal::make("页面源码",$appCode)->width("70%");
//            $modal->modelValue(Js::state($variable), false);
//            $this->children($modal);
//        }elseif ($type==2){
//            $drawer = Drawer::make("页面源码",$appCode)->width("60%");
//            $drawer->modelValue(Js::state($variable), false);
//            $this->children($drawer);
//        }else{
//            $this->footerStyle(["padding"=>"2px"]);
//            $collapse = CollapseTransition::make($appCode)->bindShow(Js::state($variable));
//            $this->slotFooter($collapse);
//        }
//        $tooltip = Tooltip::make("显示代码")->slotTrigger($btnCode);
//        $this->slotHeaderExtra($tooltip);
//        return $this;
//    }

}
